<template>
  <section class="register">
    <HmHeader title="账号登录" :isShowBack="false"></HmHeader>
    <div class="body">
      <section class="box">
        <span>用户名</span>
        <div class="user-name-box box-item">
          <input
            class="user-name"
            type="text"
            v-model.trim="userName"
            placeholder="请输入用户名"
            @focus="userNameTips = ''"
          />
          <p class="user-name-tips">{{ userNameTips }}</p>
        </div>
      </section>
      <section class="box">
        <span>密码</span>
        <div class="password-box box-item">
          <input
            class="password"
            type="password"
            v-model.trim="password"
            placeholder="请输入密码"
            @focus="passwordTips = ''"
          />
          <p class="password-tips">{{ passwordTips }}</p>
        </div>
      </section>
      <section class="register-btn box">
        <button class="register-btn-btn" @click="login">登录</button>
      </section>
      <p class="login-btn">
        <a href="/register">没有账号，去注册</a>
      </p>
    </div>
  </section>
</template>

<script>
import axios from "axios";
export default {
  name: "LoginPage",
  data() {
    return {
      userName: "",
      password: "",
      userNameTips: "",
      passwordTips: "",
    };
  },
  methods: {
    login() {
      if (!this.userName) {
        this.userNameTips = "请输入用户名";
        return;
      }
      if (!this.password) {
        this.passwordTips = "密码不能为空";
        return;
      }
      this.sendRequest();
    },
    //发送请求
    sendRequest() {
      axios
        .post("http://interview-api-t.itheima.net/h5/user/login", {
          username: this.userName,
          password: this.password,
        })
        .then((res) => {
          console.log(res);
          this.$toast("登录成功");
          localStorage.setItem("token", res.data.data.token);
          this.$router.push("/home");
        })
        .catch((err) => {
          // 请求失败
          console.log(err);
          if (err.status === 400) {
            this.$toast("用户名或密码错误");
          } else if (err.status === 422) {
            this.$toast("格式错误");
          } else {
            this.$toast("登录失败");
          }
        });
    },
  },
};
</script>

<style lang="less" scoped>
.register {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  .body {
    margin: 0 (20/3.75vw);
    .box {
      width: 100%;
      height: (60/3.75vw);
      display: flex;
      align-items: center;
      justify-content: center;
      border-top: (1/3.75vw) solid #e5e5e5;
      &:first-child {
        border-top: none;
      }
      span {
        width: (100/3.75vw);
        text-align: left;
      }

      button {
        width: 100%;
        border: none;
        border-radius: (2/3.75vw);
        height: (40/3.75vw);
        background-color: #e97637;
        color: #fff;
      }
      .box-item {
        position: relative;
        height: 100%;
        p {
          font-size: (12/3.75vw);
          position: absolute;
          line-height: (12/3.75vw);
          height: (12/3.75vw);
          font-size: (12/3.75vw);
          color: #999;
          bottom: (2/3.75vw);
          left: 0;
          color: #f00;
        }
        input {
          flex: 1;
          height: 100%;
          border: none;
          outline: none;
          background-color: #f5f5f5;
        }
      }
    }
    .login-btn {
      width: 100%;
      height: (40/3.75vw);
      text-align: right;
      a {
        color: #2b6595;
        font-size: (14/3.75vw);
      }
    }
  }
}
</style>
